import styled from 'styled-components'

const img = require('./img/teachbanner_02.png')

export const TeacherBannerWrapper = styled.div`
  height: 355px;
  background: #fff;
  border-top: 3px solid #CDCDCD;
  display: block;
  background: url(${img}) no-repeat;
  background-position-x: center;
  box-sizing: border-box;
  width: 100%;
`

export const TeacherInfo = styled.div`
  width: 1000px;
  margin: 180px auto 0px;
  img {
    float: left;
    width: 158px;
    height: 154px;
    margin-right: 10px;
  }
  .info {
    color: #fff;
    h3 {
      color: #fff;
      font-size: 18px;
      line-height: 60px;
    }
    p {
      font-size: 14px;
      line-height: 28px;
    }
  }
`

export const CourseWrapper = styled.div`
  width: 1000px;
  margin: 20px auto;
  background: #fff;
  padding-bottom: 20px;
  box-sizing: border-box;
  padding-left: 20px;
  overflow: hidden;
  .title {
    border-left: 3px solid #8BCA31;
    text-indent: 5px;
    line-height: 26px;
    margin: 10px 0px;
    font-size: 16px;
  }
  .video-list {
    li {
      float: left;
      width: 490px;
      margin-bottom: 20px;
      img {
        width: 172px;
        height: 100px;
        float: left;
        cursor: pointer;
      }
      .video-info {
        width: 300px;
        float: right;
        p {
          font-size: 14px;
          color: #666;
          &.price {
            font-weight: bold;
            color: #FE5656;
            font-size: 16px;
            margin-top: 6px;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
`